<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div ref="test">{{say}}</div>
        <button @click="add">test</button>
        <button @click="testDestroy">testDestroy</button>


    </div>
    <script>
    new Vue({

        el:"#app",
        data:{
            say:"嘻嘻嘻"
        },
        beforeCreate(){
            console.log("Vue实例初始化");
            console.log(this.$el);//undefined  Vue绑定 作用域 节点
            console.log(this.$data)//undefined  实例的 属性变量
        },
        created(){
            console.log("Vue实例化完成,但是没有渲染视图,数据已经渲染完成");
            console.log(this.$el);
            console.log(this.$data)
        },
        beforeMount(){
            console.log("视图模板编译之前");
            console.log(this.$el);
            console.log(this.$data)
        },
        mounted(){
            console.log("视图模板编译完成，并渲染视图");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.$refs.test);//<div>嘻嘻嘻</div>
        },
        beforeUpdate(){
            console.log("数据更新之前");//出来了
            console.log("ok")
        },
        updated(){
            console.log("数据更新之后")//出来了

        },
        beforeDestroy(){
            console.log("数据销毁之前");

        },
        destroyed(){
            console.log("数据销毁之后")
        },
        methods:{
            add(){
                this.say="凄凄切切"; 

            },
            testDestroy(){
                //组件销毁操作
                this.$destroy()
            }
        }
    })
    
    
    </script>
    
</body>
</html>